<template>
  <el-menu 
    :default-openeds="['2', '3']"
    :default-active="defaultActive"
    active-text-color="#ff40ba"
    router>
    <el-menu-item index="/home">
      <template slot="title"><i class="el-icon-eleme"></i>首页</template>
    </el-menu-item>

    <el-submenu index="2">
      <template slot="title"><i class="el-icon-menu"></i>系统管理</template>
      <el-menu-item-group>
        <el-menu-item index="/menu">菜单管理</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group>
        <el-menu-item index="/user">角色管理</el-menu-item>
      </el-menu-item-group>

      <el-menu-item-group>
        <el-menu-item index="/admin">管理员管理</el-menu-item>
      </el-menu-item-group> 
    </el-submenu>

    <el-submenu index="3">
      <template slot="title"><i class="el-icon-goods"></i>商城管理</template>
      <el-menu-item-group>
        <el-menu-item index="/category">商品分类</el-menu-item>
        <el-menu-item index="/specs">商品规格</el-menu-item>
        <el-menu-item index="/manage">商品管理</el-menu-item>
        <el-menu-item index="/member">会员管理</el-menu-item>
        <el-menu-item index="/banner">轮播图管理</el-menu-item>
        <el-menu-item index="/seckill">秒杀管理</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
  export default {
    data() {
        return {
          defaultActive: '/home'
        }
      },
    mounted() {
      // 给默认选中状态赋值，让其与浏览器地址一致，保持菜单选中状态
      this.defaultActive = this.$route.path
    }
  }  
</script>

<style scoped>

</style>